<template>
  <div>
    {{$store.state.title}}
    <hr>
    {{title}}
    <hr>
    gettesrs.fullName: 
    {{$store.getters.fullName}}-
    {{fullName}}
    <hr>
    <input type="text" v-model="title">
    <hr>
    <button @click="$store.commit('say')">click</button>
    <hr>
    <button @click="$store.commit('add', 300)">add(state,300)</button>
    <hr>
    <button @click="$store.commit('SET_COUNT',2)">{{$store.state.count}}</button>
    <button @click="SET_COUNT(2)">{{$store.state.count}}</button>

    <!-- <button @click="$store.state.count++">{{$store.state.count}}</button> -->

    <hr>
    
    <button @click="$store.commit('SET_TITLE','hello app')">{{$store.state.title}}</button>
    
    <router-view></router-view>
  </div>
</template>
<script>
import { SET_COUNT, SAY, ADD } from "@/mutations.js";

export default {
  computed:{
    fullName(){
      return this.$store.getters.fullName
    },
    title:{
      get(){
        return this.$store.state.title
      },
      set(value){
        this.$store.state.title = value;
      }
    },
    routes(){
      return this.$router.options.routes.filter(el=>el.meta.hidden===false)
    }
  },
  methods:{
    SET_COUNT(num){
      this.$store.commit(SET_COUNT,num)
    }
  },

  mounted(){
    // console.log(this.$store);
    // console.log(this.$store.state.title);
  }

}
</script>

<style>
div {
  padding: 10px;
  margin: 10px;
  border: solid;
}
</style>